import React from 'react';
import { Link } from 'react-router-dom';

import Statistic from 'service/statistic-service.jsx';
import MUtil from 'util/mm.jsx';

import PageTitle from 'component/page-title/index.jsx'
import './index.scss';

const _statistic = new Statistic();
const _mm = new MUtil();



class Home extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            userCount: '6999',
            productCount: '3660',
            orderCount: '1888'
        }
    }
    componentDidMount() {
        this.loadCount();
    }
    loadCount() {
        _statistic.getHomeCount().then(res=>{
            this.setState(res);
        },errMsg => {
            _mm.errorTips(errMsg);
        })
    }
    render() {
        return (
            <div id='page-wrapper'>
                <PageTitle title='首页'>{/* 可以在这里写内容，传递到组件的props.children */}</PageTitle>
                <div className="row">
                    <div className="col-md-4">
                        <Link to='/user' className='color-box brown'>
                        {/* brown棕色的 */}
                            <p className="count">{this.state.userCount}</p>
                            <p className="desc"></p>
                            <i className="fa fa-user-o"></i>
                            <span>用户总数</span>
                        </Link>
                    </div>

                    <div className="col-md-4">
                        <Link to='/product' className='color-box green'>
                            <p className="count">{this.state.productCount}</p>
                            <p className="desc"></p>
                            <i className="fa fa-list"></i>
                            <span>商品总数</span>
                        </Link>
                    </div>

                    <div className="col-md-4">
                        <Link to='/order' className='color-box blue'>
                            <p className="count">{this.state.orderCount}</p>
                            <p className="desc"></p>
                            <i className="fa fa-check-square-o"></i>
                            <span>订单总数</span>
                        </Link>
                    </div>

                </div>
            </div>
        )
    }
}

export default Home